<template>
  <div class="tool-bar-container">
    <div class="item" v-for="item in toolList" :key="item.type" @click="handlerClick(item)">
        <block v-if="item.type=='cart'">
            <el-badge :value="12">
                <i class="tool_icon" :class="item.icon"></i>
            </el-badge>
        </block>
        <block v-else>
            <i class="tool_icon" :class="item.icon"></i>
        </block>
        <span class="tool_name">{{item.name}}</span>
    </div>
  </div>
</template>

<script>
export default {
    props:{
        toolList:{
            type:Array,
            default:()=>[
                {name:'客服',icon:'el-icon-service',type:'service',url:'',},
                {name:'购物车',icon:'el-icon-shopping-cart-2',type:'cart',url:'/car',},
                {name:'常购清单',icon:'el-icon-document-copy',type:'regularPurchase',url:'',},
                {name:'返回顶部',icon:'el-icon-top',type:'backTop',url:'',},
            ],
        }
    },
    data(){
        return{}
    },
    methods:{
        handlerClick(item){
            if(item.type == 'service'){
                this.$message.warning('暂未开放')
            }else if(item.type == 'cart' || item.type == 'regularPurchase'){
                this.$router.push(item.url)
            }else if(item.type == 'backTop'){
                 window.scrollTo({
                    top: 0,
                    left: 0,
                    behavior: 'smooth',
                });
            }
        },
    },
}
</script>

<style lang="scss" scoped>
.tool-bar-container{
    z-index: 100000;
    position: fixed;
    right: 50px;
    bottom: 90px;
    width: fit-content;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0px -4px 16px 0px rgba(0,0,0,0.3);
    .item{
        cursor: pointer;
        width: 80px;
        height: 100px;
        border-top: 1px solid #CCCCCC;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        .tool_icon{
            color: var(--theme);
            font-size: 42px;
        }
        .tool_name{
            font-weight: 600;
            font-size: 14px;
            color: #333333;
        }
    }
    .item:first-child{
        border-top: none;
    }
}
</style>